<template>
  <div>
    <div class="node" v-has="{action: 'charge:wx:refund:list', effect: 'move'}">
      <div :class="[$style.search_box, $style.topSelect]">
        <SearchInput
        placeholder="订单编号"
        label="订单编号"
        style="margin-right:20px"
        :value="searchs.oid"
        :onChange="(val) => changeSearch('oid',val)"
        :onBlur="queryData"
      />
        <SearchInput
          placeholder="微信申请退款编号"
          label="申请退款编号"
          style="margin-right:20px"
          :value="searchs.roid"
          :onChange="(val) => changeSearch('roid',val)"
          :onBlur="queryData"
        /> 
        <SearchInput
          placeholder="第三方退款编号"
          label="第三方退款编号"
          style="margin-right:20px;"
          :value="searchs.thirdRefundNo"
          :onChange="(val) => changeSearch('thirdRefundNo',val)"
          :onBlur="queryData"
        /> 
        <SearchInput
          placeholder="微信退款编号"
          label="微信退款编号"
          style="margin-right:20px;"
          :value="searchs.wxRefundNo"
          :onChange="(val) => changeSearch('wxRefundNo',val)"
          :onBlur="queryData"
        /> 
        <div :class="$style.selectBox">
        <label>状态：</label>
        <el-select
          style="width:160px"
          v-model="searchs.state"
          clearable
          @change="queryData"
          placeholder="请选择状态"
        >
          <el-option label="处理中" :value="1"></el-option>
          <el-option label="退款成功" :value="2"></el-option>
          <el-option label="退款失败" :value="3"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" style="display: flex;align-items: center;">
        <label>时间：</label>
        <el-date-picker
          v-model="searchs.appointmentTime"
          type="datetimerange"
          @change="queryData"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button size="small" plain @click="queryData">查询</el-button>        
      </div>
      </div>
      <Panel title="微信充值订单退款详细" useBack>
        <TableEncapsulation
          slot="body"
          :changeSelectRow="(ids) => multipleSelection = ids"
          :tableConfig="tableConfig"
          :tableData="tableData"
        >
          <template slot="operation" slot-scope="operation">
            <el-button type="text" @click="()=>nav(operation.row)">--</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
        </TableEncapsulation>
      </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'charge:wx:refund:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>

<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";

export default {
  naem:'refundRecord',
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
       searchs:{
        component: 'refundRecord',
        page: 1,
        state:'',
        oid: '',
        roid: '',
        thirdRefundNo: '',
        appointmentTime:[],
        wxRefundNo: '',
      },
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      operation: true,
      multipleSelection: [],
      nickName: "",
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      tableData: [],
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: false,
        columnConfig: [
          {
            type: "text",
            prop: "oid",
            label: "充值订单编号",
            align: "center",
          },
          {
            type: "text",
            prop: "orderPrice",
            label: "充值金额",
            align: "center",
          },
          {
            type: "text",
            prop: "price",
            label: "退款金额",
            align: "center",
          },
           {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 1 ? "处理中" : val == 2 ? "退款成功"  : "退款失败",
            // style: "background: #d4eafb;color: #1d9aca;border-radius: 2px;padding: 2px;"
          },
          {
            label: "退款单号",
            type: "text",
            prop: "refundNo",
            align: "center"
          },
          {
            label: "退款时间",
            type: "text",
            prop: "resultTime",
            align: "center"
          },
          {
            label: "用户申请退款编号",
            type: "text",
            prop: "roid",
            align: "center"
          },
          {
            label: "第三方充值单号",
            type: "text",
            prop: "thirdOid",
            align: "center",
        
          },
          {
            label: "第三方退款编号",
            type: "text",
            prop: "thirdRefundNo",
            align: "center",
        
          },
          {
            label: "微信退款编号",
            type: "text",
            prop: "wxRefundNo",
            align: "center",
        
          },
           {
            label: "失败原因",
            type: "text",
            prop: "error",
            align: "center",
        
          },
           {
            label: "操作人",
            type: "text",
            prop: "operator",
            align: "center",
        
          },
          {
            label: "时间",
            type: "text",
            prop: "createTime",
            align: "center",
        
          },
        //   this.operation && {
        //     type: "operation",
        //     align: "center",
        //     label: "操作"
        //   }
        ].filter(Boolean)
      };
    }
  },
  methods: {
    nav(rowData){
      this.$router.push({
        path: '/user-order',
        query: {
          userId:rowData.id,
          userName: rowData.nickName
        }
      })
    },
     changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    balance(rowData) {
      this.$router.push({
        path: "/user/balance",
        query: {
          userId: rowData.id
        }
      })
    },
    changeKeuWord(val){
      this.keywords = val
      this.pager.current=1
    },
    pageChange(val) {
      this.pager.current = val
      this.queryData()
    },
    searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs &&searchs.component == 'refundRecord'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'refundRecord'){
        this.pager = pager
      }
    },
    async queryData(){
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1] + 86400000-1, "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let roid =  this.searchs.roid
      let oid = this.searchs.oid
      let thirdRefundNo = this.searchs.thirdRefundNo
      let wxRefundNo = this.searchs.wxRefundNo
      let page = this.pager.current
      let state = this.searchs.state
      let search = objectFilter({beginTime, endTime, roid, oid, page, thirdRefundNo, wxRefundNo, state})
      let res = await request({
        url: "/charge/wx/refund/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
       this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      // this.$set(this.pager,'total',res.total>>>0)
    },
  }, 
  created() {
    let now = new Date().getTime() + 3600 * 1000 * 24
    let year = new Date(now).getFullYear()
    let month = new Date(now).getMonth() 
    let day = new Date(now).getDate()
    let last = new Date().getTime() - 3600 * 1000 * 24 * 6
    let lastYear =  new Date(last).getFullYear() 
    let LastMonth = new Date(last).getMonth() 
    let lastDay = new Date(last).getDate()
    this.searchs.appointmentTime = [ new Date(lastYear, LastMonth, lastDay, 0, 0,0), new Date(year, month, day, 0, 0,0)]
    this.searchsFnc()
    this.searchs.roid = this.$route.query.roid
    this.queryData()
  }
};
</script>

<style lang='scss' module>
.modifyStyle{

}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: row-reverse;
  
  :global{
    .el-input{
      width: 250px;
    }
    .el-select{
      .el-input{
        width: 90px;
      }
    }
    .el-input__icon{
      line-height: 32px;
    }
  }
}

.topSelect{
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  margin: 4px 0;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>